<template>
	<view class="container">
		<view class="page-title">
			<view class="title-text">
				反馈中心
			</view>
		</view>
		<view class="page-content">

			<view class="button-group">
				<button class="button" @click="showMyFeedbacks">
					查看我的反馈
				</button>
				<button class="button" @click="showNewFeedback">
					新增反馈
				</button>
			</view>
			<view class="feedback-list" v-show="showMyFeedbackContent">
				<view class="feedback-item" v-for="feedback in feedbackList" :key="feedback.fbId">
					<view class="feedback-item-content" @click="toggleFeedback(feedback)">
						<text>{{ feedback.show ? feedback.fbContent : truncateContent(feedback.fbContent) }}</text>
						<text v-if="!feedback.show"> 点击查看全部</text>
					</view>
					<text class="feedback-item-status">{{ feedback.fbStatus }}</text>
					<text class="feedback-item-type">{{ feedback.fbType }}</text>
				</view>
				<view class="load-more" v-if="!isAllFeedbackLoaded && !isFeedbackLoading" @click="loadMoreFeedback">
					<text class="load-more-text">查看更多</text>
				</view>
				<view class="loading" v-if="isFeedbackLoading">
					<text class="loading-text">加载中...</text>
				</view>
				<view class="no-more" v-if="isAllFeedbackLoaded">
					<text class="no-more-text">没有更多了</text>
				</view>
			</view>
			<view class="new-feedback" v-show="showNewFeedbackContent">
				<form>
					<input class="input-field" type="text" placeholder="请输入反馈内容"
						v-model="newFeedbackContent.fbContent" />
					<view class="select-field">
						<!-- <button @click="showPicker">选择</button> -->
						<picker @change="pick($event)" mode="selector" :value="selectedTypeIndex" :range="feedbackTypes"
							class="listPicker">
							<view>请选择反馈类型: {{feedbackTypes[selectedTypeIndex]}}</view>
						</picker>
					</view>
					<button class="submit-button" @click="submitNewFeedback($event)">提交反馈</button>
					<p v-if="isEmpty(newFeedbackContent.fbContent)" class="error-message">反馈内容不能为空</p>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	import feedbackVue from './feedback.vue';
	export default {
		data() {
			return {
				detailShow: false,
				flag: false,
				showMyFeedbackContent: false,
				showNewFeedbackContent: false,
				newFeedbackContent: {
					fbContent: "",
					fbType: "维修",
				},
				feedbackList: [],
				isFeedbackLoading: false,
				isAllFeedbackLoaded: false,
				pageNum: 1,
				pageSize: 3,
				feedbackTypes: ['维修', '投诉', '意见'],
				selectedTypeIndex: 0,
			};
		},
		mounted() {
			this.showMyFeedback();
		},
		methods: {
			isEmpty(value) {
				return value.trim() === '';
			},
			toggleFeedback(feedback) {

				console.log(feedback.show)
				console.log(feedback)
				if (feedback.show) {
					console.log(11111111)
					feedback.show = false;
					//this.$set(feedback,'showFullContent',false);
					console.log(feedback.show)
				} else {
					console.log(222222222)
					feedback.show = true;
					//this.$set(feedback,'showFullContent',true);
					console.log(feedback.show)
				}

				// feedback.showFullContent = !feedback.showFullContent;
			},
			truncateContent(content) {

				// 自定义截断函数，这里只截取前30个字符作为示例
				return content.slice(0, 3) + "...";

			},
			pick(e) {
				this.selectedTypeIndex = e.target.value;
				this.newFeedbackContent.fbType = this.feedbackTypes[e.target.value];
				console.log(this.newFeedbackContent.fbType);
			},
			showMyFeedbacks() {
				this.showMyFeedbackContent = true;
				this.showNewFeedbackContent = false;
			},
			async showMyFeedback() {
				const that = this;

				try {
					const res = await new Promise((resolve, reject) => {
						uni.request({
							url: "/user/feedback/getMyFb",
							data: {
								pageNum: that.pageNum,
								pageSize: that.pageSize
							},
							success(res) {
								resolve(res);
							},
							fail(err) {
								reject(err);
							}
						});
					});

					const newData = res.data.data.list;
					const abb = newData.map(feedback => {
						return {
							...feedback,
							show: false
						};
					});
					this.feedbackList = [...this.feedbackList, ...abb];
				} catch (error) {
					// 处理请求错误
					console.error(error);
				}
			},

			showNewFeedback() {
				this.showMyFeedbackContent = false;
				this.showNewFeedbackContent = true;
			},
			submitNewFeedback(event) {
				if (this.isEmpty(this.newFeedbackContent.fbContent)) {
					// 反馈内容为空，阻止表单提交
					event.preventDefault();
					// 显示错误消息或执行其他操作
					console.log('反馈内容不能为空');
				} else {
					const that = this;
					// 处理提交逻辑
					console.log("提交新反馈:", this.newFeedbackContent);
					const feedback = {
						...this.newFeedbackContent
					};
					// 可以替换为实际的API调用来保存反馈
					uni.request({
						url: "/user/feedback/addFb",
						data: feedback,
						method: 'POST',
						success(res) {
							console.log(res)
							//that.feedbackList.unshift(feedback); // 将新反馈插入到列表开头
							that.newFeedbackContent = {}; // 清空输入框
							that.resetFeedbackData();
						}
					});
				}
			},
			async loadMoreFeedback() {
				const n1 = this.feedbackList.length;
				console.log(n1);
				if (!this.isAllFeedbackLoaded && !this.isFeedbackLoading) {
					this.isFeedbackLoading = true;
					this.pageNum++;
					await this.showMyFeedback(); // 等待数据加载完成
					const n2 = this.feedbackList.length;
					console.log(n2);
					if (n1 === n2) {
						console.log(333333);
						this.isAllFeedbackLoaded = true;
					}
					this.isFeedbackLoading = false; // 设置加载状态为false
				}
			},
			resetFeedbackData() {
				this.showMyFeedbackContent = false;
				this.showNewFeedbackContent = false;
				this.newFeedbackContent = {
					fbContent: "",
					fbType: "维修",
				};
				this.feedbackList = [];
				this.isFeedbackLoading = false;
				this.isAllFeedbackLoaded = false;
				this.pageNum = 1;
				this.showMyFeedback();
			},

			refreshFeedback() {
				if (!this.isFeedbackLoading) {
					this.isFeedbackLoading = true;
					this.isAllFeedbackLoaded = false;
					this.feedbackList = [];
					this.pageNum = 1;
					// 可以替换为实际的API调用来刷新反馈列表数据
					// 在成功响应中更新this.feedbackList
					this.showMyFeedback();
				}
			},
		},
	};
</script>

<style>
	.picker {
		width: 100%;
		box-sizing: border-box;
		padding: 50rpx;
		text-align: center;
		margin-top: 50rpx;
	}

	.container {
		margin: 20px;
	}

	.page-title {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 20px;
		height: 40px;
	}

	.title-text {
		text-align: center;
	}

	.page-content {
		padding: 20px;
		background-color: #f5f5f5;
		border-radius: 4px;
	}

	.description {
		margin-bottom: 20px;
	}

	.description-text {
		text-align: center;
	}

	.button-group {
		display: flex;
		justify-content: center;
		margin-bottom: 10px;
	}

	.button {
		padding: 10px 20px;
		background-color: #eee;
		border-radius: 4px;
		cursor: pointer;


	}

	.feedback-list {
		margin-bottom: 20px;
	}

	.feedback-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		background-color: #eee;
		border-radius: 4px;
		margin-bottom: 10px;
	}

	.feedback-item-content {
		flex: 1;
		margin-right: 10px;
		cursor: pointer;
	}

	.feedback-item-status,
	.feedback-item-type {
		width: 60px;
	}

	.load-more,
	.loading,
	.no-more {
		text-align: center;
		margin-bottom: 20px;
	}

	.load-more-text,
	.loading-text,
	.no-more-text {
		color: #999;
	}

	.input-field,
	.select-field,
	.submit-button {
		width: 100%;
		padding: 10px;
		margin-bottom: 10px;
	}

	.submit-button {
		background-color: #eee;
		border-radius: 4px;
		cursor: pointer;
	}
</style>